<template>
  <div>
    <div class="header bg-fff flex jc-sa aic">
        <p >
            <!-- v-if="typeof leftArrow === 'string'"判断这个图标是否显示 -->
            <van-icon @click="$emit('click-left')"  v-if="typeof leftArrow === 'string'" name="arrow-left"/>
            <span>{{leftText}}</span>
        </p>
        <span>{{title}}</span>
        <span @click="hanldClick">{{rightText}}</span>
    </div>
  </div>
</template>

<script>
import { emit } from 'process';

export default {
    //接收使用组件的那边传过来的参数,将这些参数放到上面去,并且上面只能使用驼峰式
    props:['left-text','title','right-text','left-arrow'],
    methods:{
        hanldClick(){
            //点击触发的时候做点其它的事情
            // console.log(111111111);
            //去触发父组件中的事件时,子传父需要使用$emit方法
            //并且在函数中就要使用this来指向,在外面就不需要使用this指向
            this.$emit('click-right');
            
        }
    }
}
</script>

<style lang="less">
    .header{
        height: 50px;
        // border: 1px solid blue;
    }
</style>